<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
	<title>VForm 3 Designer Demo</title>
	<link rel="stylesheet" href="https://lf26-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.min.css" />
	<link rel="stylesheet" href="../dists/render.style.css?t=20220204"> <!-- 根据Web服务器或CDN路径修改 -->
	<link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../node_modules/fontawesome/css/all.css">
    <link rel="stylesheet" href="../node_modules/bootstrap-table/dist/bootstrap-table.min.css">
	<script src="../node_modules/jquery/dist/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="/docs/4.0/assets/js/vendor/jquery-slim.min.js"><\/script>')</script>
  <style type="text/css">
	  body {
	    margin: 0;  /* 消除垂直滚动条 */
	  }
	</style>
</head>
<body>
  <div id="app">
	  <el-button type="default" @click="openRenderDlg">点击打开 Dialog</el-button>
		<table id="table"></table>
	
		<el-dialog
		  title="提示"
		  v-model="dialogVisible"
		  width="90%"
		  :before-close="handleClose"
		>
		  <span>
			<v-form-render  v-if="dialogVisible && modelId" :form-json="formJson" :form-data="formData" :option-data="optionData" ref="vFormRef"></v-form-render>		  
		  </span>
		  <template #footer>
			<span class="dialog-footer">
			  <el-button @click="dialogVisible = false">取消</el-button>
			  <el-button type="primary" @click="submitForm">保存</el-button>
			</span>
		  </template>
		</el-dialog>
  </div>
  
	 <script crossorigin="anonymous" integrity="sha512-9l+B+sZNtrdrhFWM0UGiKsRwZctEAfW7h8Z4Ycd3tQyvis8tZCpNkxTxJ3XcCRP54VD9YQs+4PeMVi5ctdlbcw==" src="https://lib.baomitu.com/vue/3.2.30/vue.global.min.js"></script>
	
	<script src="../dists/render.umd.js?t=20220204"></script> <!-- 根据Web服务器或CDN路径修改 -->	
	<script src="../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
	<script src="../node_modules/bootstrap-table/dist/bootstrap-table.min.js"></script>
	<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/element-plus/2.0.4/index.full.min.js"></script>
	<script src="./en.js?v=2"></script>
<script setup>
const m_id=2;
const { ref, reactive, onMounted, nextTick } = Vue;
//import { ref, reactive } from 'Vue'
const { ElMessage } = ElementPlus;
function actFmt(value, row){
console.log(row);
	return [
		"<button class='btn btn-default' @click='openRenderDlg("+row.id+")'>修改</button>"
	].join('');
}
$('#table').bootstrapTable({
search:true,
showColumnsSearch:true,
showRefresh:true,
showToggle:true,
smartDisplay:true,
clickToSelect:true,
showColumns:true,
showColumnsToggleAll:true,
pagination:true,
sidePagination:"client",
pageList:"[10,20,50,100,all]",
  columns: [{
    field: 'id',
    title: 'Item ID'
  }, {
    field: 'name',
    title: 'Item Name'
  }, {
    field: 'price',
    title: 'Item Price'
  },{
  field: 'action',
    title: '操作',
	formatter:"actFmt"
  }],
  data: [{
    id: 1,
    name: 'Item 1',
    price: '$1'
  }, {
    id: 2,
    name: 'Item 2',
    price: '$2'
  }]
})

//const { axios } = axios;

		
const { createApp } = Vue;
const app= createApp({
	  data() {
		return {
		  modelId:0,
		  dialogVisible: false,
		  formJson: {"widgetList":[],"formConfig":{"modelName":"formData","refName":"vForm","rulesName":"rules","labelWidth":80,"labelPosition":"left","size":"","labelAlign":"label-left-align","cssCode":"","customClass":"","functions":"","layoutType":"PC","jsonVersion":3,"dataSources":[],"onFormCreated":"","onFormMounted":"","onFormDataChange":""}},
          formData: {},
          optionData: {},
		
		}
	  },
		mounted() {
			
		  },	  
	  methods: {
        handleClose(done) {
			this.$confirm('确认关闭？')
			  .then((_) => {
				done()
			  })
			  .catch((_) => {})
		  },
		submitForm(){
			this.$refs.vFormRef.getFormData().then( (formData) => {
            // Form Validation OK
			console.log( this.modelId );
            console.log( JSON.stringify(formData) )
			this.dialogVisible=false;
          }).catch( function(error) {
            // Form Validation Failed
			this.dialogVisible=false;
            alert(error)
          })
			
		},
		openRenderDlg(mid){
		  console.log(mid);
		this.dialogVisible=true;
		this.modelId=mid;
			axios.get('./data1.json').then(res=>{
			    //console.log(res.data);
				let formJson = res.data;
				formJson = decrypt(formJson)
				//console.log(formJson);
				formJson = JSON.parse(formJson)
				//console.log(formJson);
				this.formJson=formJson;
				this.$refs.vFormRef.setFormJson(formJson);
			}).catch( function(error) {
				alert(error)
			})
		},		
      },
	  }).use(ElementPlus)
	  .use(VFormRender)
	  .mount("#app");
	  
	
</script>

<style lang="scss">
  #app {
    height: 100%;
  }
</style>
</body>
</html>